<template>
<div class="guess_rule"   @touchmove.stop.prevent="moveHandle" @click="hideModal()">
  <div @click.stop="hideModals($event)">
    <div class="guess_rule_area" :class="{'new_year_bd':skinType==6}">
      <scroll-view scroll-y="true" class="guess_rule_html">
        <div v-html="rule"></div>
      </scroll-view>


    </div>
    <div class="guess_rule_close">
      <image :src="qiniuUrl+'close.png'" mode="aspectFill" @click="hideModal"></image>
    </div>
  </div>

</div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "guessRule",
  computed:{
    ...mapGetters(['qiniuUrl','skinType'])
  },
  data(){
    return{

    }
  },
  props:{
    rule:{
      type:String,
      default: ''
    },
  },
  methods:{
    move($event){
      event.stopPropagation()
    },
    moveHandle(){

    },
    hideModal(){
      this.$emit('hideRuleModal')
    },
    hideModals(event){
      event.stopPropagation()
    }
  },
  mounted() {
  }
}
</script>

<style scoped lang="scss">
@import '~@/common/common.scss';
.guess_rule{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99;
  .guess_rule_scroll{

  }
  .guess_rule_area{
    width: 640rpx;
    height: 70%;
    box-sizing: border-box;
    background: url("~@/static/sports/rule_bac.png");
    background-size: 100% 100%;
    @include center;
    height: 70%;
    z-index: 101;
    .guess_rule_img{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 101;
    }
    .guess_rule_html{
      position: relative;
      z-index: 101;
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #222222;
      margin: 100rpx 20rpx 30rpx 35rpx;
      height: calc(100% - 140rpx);
      width: 90%;
      overflow-y: auto;
    }
    .guess_rule_html ::v-deep img{
      width: 100% !important;
    }
  }
  .new_year_bd{
	  background: url("~@/static/sports/rule_bac_new_year.png");
	  background-size: 100% 100%;
  }
  .guess_rule_close{
    width: 70rpx;
    height: 70rpx;
    position: absolute;
    bottom: 70rpx;
    left: 50%;
    transform: translate(-50%,0%);
    z-index: 101;
    image{
      width: 100%;
      height: 100%;
    }
  }
}
</style>